<template>
  <div class="my">
    <!-- {{$store.state.a}}
    <button @click="$store.commit('changea',2)">改</button> -->
   <van-image
      class="my-avatar"
      round
      width="5rem"
      height="5rem"
    />
    <p class="name">小明</p>
    <router-link class="edit" to="/user">编辑资料</router-link>

  <van-grid class="data-info" :border="false" column-num="2">
        <van-grid-item class="data-info-item">
          <div slot="text" class="text-wrap">
            <div class="count">1</div>
            <div class="text">头条</div>
          </div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div class="text-wrap" slot="text">
            <div class="count">3</div>
            <div class="text">获赞</div>
          </div>
        </van-grid-item>
      </van-grid>

  <van-grid clickable :column-num="2" >
    <van-grid-item to="/">
      <van-icon name="star-o" size="25px" color="red"/>
      <span style="margin-left:-15px;margin-top:10px;">收藏</span>
    </van-grid-item>
    <van-grid-item to="/">
      <van-icon name="underway-o"  size="25px" color="red"/>
      <span style="margin-left:-15px;margin-top:10px;">历史</span>
    </van-grid-item>
  </van-grid>
   
    <van-cell title="修改密码" is-link />
    <van-cell title="联系我们" is-link to="" />
    <van-cell title="关于我们" is-link to="" />
    <van-cell title="退出登录" class="cell" to="/login" />
  
    <!-- <div class="login" to="/" >退出登录</div> -->

  <div class="footer">
    <van-tabbar  v-model="active" active-color="#4fc08d" inactive-color="#000" fixed>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/publish">发布</van-tabbar-item>
      <van-tabbar-item icon="friends-o" replace>我的</van-tabbar-item>
    </van-tabbar>
  </div>
  </div>

   
</template>

<script>
import { Uploader ,Image,Grid, GridItem,Icon,Cell, CellGroup} from 'vant';
export default {
  data(){
    return{
      active:''
    }
  },
  components:{
    [Uploader.name]:Uploader,
    [Image.name]:Image,
    [Grid.name]:Grid,
    [GridItem.name]:GridItem,
    [Icon.name]:Icon,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    // [Button.name]:Button,
    
  },
  methods:{
    afterRead(file){
      console.log(file)
    }
  }
}
</script>

<style lang="less">
.my{
  background: url("~@/assets/banner.jpg") no-repeat;
  // background-size: cover;
  .my-avatar{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 50px;
    left: 20px;
    border: 1px solid #ccc;
  }
  .name{
    color: #fff;
    padding-left: 120px;
    margin-top: -60px;
  }
  .edit{
    height: 15px;
    width: 80px;
    line-height: 15px;
    background-color: #fff;
    border-radius: 20px;
    padding: 5px;
    display: block;
    text-align: center;
    border: 1px solid #ccc;
    margin-left: 270px;
    margin-top: -40px;
  }
  // .login{
  //   height: 50px;
  //   text-align: center;
  //   line-height: 50px;
  //   color: red;
  //   background-color: #fff;
  // }
  .cell{
    margin-top: 10px;
    text-align: center;
    font-size: 17px;
   
    color: red;
  }
  .data-info {
      .data-info-item {
        height: 65px;
        margin-top: 80px;
        color: #fff;
        .text-wrap {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .count {
            font-size: 18px;
            margin-top: -100px;
          }
          .text {
            font-size: 11px;
          }
        }
      }
    }
  
}


   // .my-header{
    //     width: 90px;
    //     height: 90px;
    //     border-radius: 50%;
    //     overflow: hidden;
    //     border: 1px solid #ccc;
    // }
</style>